<template>
  <div class="home">
    <!-- <h2>项目</h2>

    <h1>窦颢</h1>
    <h2>教育</h2>
    <p>2017.9- 硕士在读，早稻田大学 人机交互编程实验室</p>
    <p>2014.8-2018.7 本科，东南大学 计算机科学与技术专业 （卓工培养计划）</p>
    
    <h2>设计作品</h2>
    <h2>专业技能</h2>
    <h2>实习经验</h2>
    <h2>奖励</h2>
    <p>第九届中国大学生计算机设计大赛 一等奖</p>
    <p>2014-2015，2015-2016年度东南大学计算机科学与工程学院优秀学生</p> -->
    <HelloWorld id='HelloWorld' v-bind:style="{ height: fullHeight*0.9 + 'px'}" v-bind:height="fullHeight"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Hitem from "@/components/Hitem.vue";

export default {
  name: "home",
  components: {
    HelloWorld,
    Hitem
  },
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      homeImgNavClass: {
        width: "60%",
        color: "red",
        fontSize: "13px"
      },
      products: [
        {
          img:  "http://pcera22ot.bkt.clouddn.com/rakutenCover2.png" ,
          title: "Rakuten Anywhere",
          slogan: "增强现实智能购物系统",
          introduction: "结合攻略和社交的游记网站，关键词自然是攻略和社交， 游记，一般都详细的记录了旅游过程，往往具有旅行攻略的性质。而以简短信息分享为核心社交网络，包含的信息量少，更强调分享者的心情。长篇的游记和简短的社交动态似乎看起来格格不入，但实际上，它们有一个共同的来源，旅游本身。 我们希望能将两者结合起来，打造出一个能同时满足用户记录、检索游记和即时社交的旅游网站。",
          routerName: "lala"
        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/HOWTOANDU.jpg" ,
          title: "STILLWALKING 步履不停",
          slogan: "结合攻略和社交的游记网站",
          introduction: "结合攻略和社交的游记网站，关键词自然是攻略和社交， 游记，一般都详细的记录了旅游过程，往往具有旅行攻略的性质。而以简短信息分享为核心社交网络，包含的信息量少，更强调分享者的心情。长篇的游记和简短的社交动态似乎看起来格格不入，但实际上，它们有一个共同的来源，旅游本身。 我们希望能将两者结合起来，打造出一个能同时满足用户记录、检索游记和即时社交的旅游网站。",
          routerName: "lala"
        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/HOWTOANDU.jpg" ,
          title: "东南大学最具影响力毕业生官方网站",
          slogan: "信息录入与在线投票",
          introduction: " 用于向全校师生展示东南大学2017届最具影响力毕业生的基本信息和宣传视频，",
          routerName: "lala"
        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/HOWTOANDU.jpg" ,
          title: "Gallery",
          slogan: "艺术家的在线画廊，艺术爱好者的资源库",
          introduction: " 用于向全校师生展示东南大学2017届最具影响力毕业生的基本信息和宣传视频，",
          routerName: "lala"
        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/SMstartgame.png" ,
          title: "HOWTO颢豆",
          slogan: "颢豆灵感，精品与在线CD",
          introduction: " 用于向全校师生展示东南大学2017届最具影响力毕业生的基本信息和宣传视频，",
          routerName: "lala"
        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/SMstartgame.png" ,
          title: "超级冒险岛",
          slogan: "超级玛丽乱入冒险岛",
          introduction: " 用于向全校师生展示东南大学2017届最具影响力毕业生的基本信息和宣传视频，",
          routerName: "lala"
        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/HOWTOANDU.jpg" ,
          title: "Recycle",
          slogan: "寓教于乐的垃圾分类游戏",
          introduction: " 用于向全校师生展示东南大学2017届最具影响力毕业生的基本信息和宣传视频，",
          routerName: "lala"
        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/HOWTOANDU.jpg" ,
          title: "WebAR",
          slogan: "WebAR开发框架",
          introduction: " 用于向全校师生展示东南大学2017届最具影响力毕业生的基本信息和宣传视频，",
          routerName: "lala"
        },
        {
          img:  "http://pcera22ot.bkt.clouddn.com/HOWTOANDU.jpg" ,
          title: "仙侠网游",
          slogan: "WebGL",
          introduction: " 用于向全校师生展示东南大学2017届最具影响力毕业生的基本信息和宣传视频，",
          routerName: "lala"
        }
      ]
    };
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        that.fullHeight = window.fullHeight;
        that.fullWidth = window.fullWidth;
      })();
    };
  },
  watch: {
    //监听窗口高度
    fullHeight(val) {
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          that.timer = false;
        }, 400);
      }
    }
  }
};
</script>
<style>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#HelloWorld {
  width: 70%;
}
.item {
  margin-top: 10%;
}
@media only screen and (max-width: 767px) {
  #HelloWorld {
  width: 80%;
}
}
</style>